<template>
  <div class="home">
    <myHeader/>
    <div class="content">
      <div class="task_div">
        <div class="task_content">
          <task />
        </div>
      </div>

      <div class="own_div">
        <div class="own_content">
          <own />
        </div>
      </div>

      <div class="user_ranking_div">
        <div class="user_ranking_content">
          <user_ranking />
        </div>
      </div>

      <div class="spliter">
      </div>

      <div class="notice_div">
        <div class="notice_content">
          <notice />
        </div>
      </div>

      <div class="statistics_div">
        <div class="statistics_content">
          <statistics />
        </div>
      </div>

      <div class="problem_ranking_div">
        <div class="problem_ranking_content">
          <problem_ranking />
        </div>
      </div>


    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "../components/header.vue";
import own from "../components/own.vue";
import task from "../components/task.vue";
import statistics from "../components/statistics.vue";
import notice from "../components/notice.vue";
import user_ranking from "../components/user_ranking.vue";
import calendar from "../components/calendar.vue";
import problem_ranking from "../components/problem_ranking.vue";
import myFooter from "../components/footer.vue";

export default {
  name: "Home",
  components: {
    myHeader,
    own,
    task,
    statistics,
    notice,
    user_ranking,
    problem_ranking,
    calendar,
    myFooter,
  },
  props: ['user'],
  
  
  mounted() {
    this.$axios({
      method: "GET",
      url: "http://81.70.192.34:8088/getNowUserInfo",
    }).then(res => {
      this.user = res.data.data
      console.log(this.user)
    }).catch((error) => {
          console.error(error);
    });
  },
  data() {
    return {
      
    }
  }
};
</script>

<style scoped>
.home {
  height: 90vh;
  width: 95vw;
}
.spliter{
  height: 5vh;
  width: 95vw;
}
.task_div {
  margin-left: 4vh;
  margin-top: 3vh;
  height: 40vh;
  width: 36vw;
}
.task_content{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.notice_div {
  margin-left: 4vh;
  height: 40vh;
  width: 36vw;
}
.notice_content{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.own_div {
  margin-top: 3vh;
  margin-left: 3vh;
  height: 40vh;
  width: 18vw;
}
.own_content{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.user_ranking_div {
  margin-top: 3vh;
  margin-left: 3vh;
  height: 40vh;
  width: 36vw;
}
.user_ranking_content{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.statistics_div {
  margin-left: 3vh;
  height: 40vh;
  width: 18vw;
}
.statistics_content{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.problem_ranking_div {
  margin-left: 3vh;
  height: 40vh;
  width: 36vw;
}
.problem_ranking_content{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
/* .myFooter_div{
  height: 5vh;
  width: 100vw;
} */
.content {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}
</style>